<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/newlist.css" /> 
</head>
<body class="white">
	<!--下拉刷新容器-->
	<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="top: 0;">
	  <div class="mui-scroll">
		   	<div class="list-item-box">
		   		 <div class="item">
		   		 	<div class="collect "></div>
		   		 	<img src="../icon/mask-big.jpg" />
		   		 	<div class="item-name mui-clearfix" >
		   		 		<!--<div class="mui-pull-right twoName">哈哈哈</div>-->
		   		 		<div class="name"></div>
		   		 		<div class="mui-pull-right">¥ 0.00</div>
		   		 		<div class="score mui-clearfix" >
		   		 			<div class="score_star mui-pull-left" data-cover="0"></div>
							 <div class="mui-pull-left score_comment">0条评论</div>
		   		 		</div>
		   		 	</div>
		   		 </div>
		   	</div>
	  </div>
	</div>
	
<script src="../js/mui.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/bexta.js"></script> 
<script type="text/javascript">
var views, first = 0, last = 10 ;
mui.init({
	beforeback:function(){
		bexta.setStatus(true);
	},
	pullRefresh:{
		container:"#refreshContainer",
		down:{
			height:50,
			auto:false,
			callback:downfresh
		},
		up:{
			height:50,
			auto:false,
			callback:upload
		}
	}
});
mui.plusReady(function () {
    views = bexta.getWebview();
    views.addEventListener('show', function(){
    		 bexta.setStatus(false);
    })
    bexta.ajax(api.service_goods, function(res){
    		initDom(res);
    		first = res.list.length;
    }, {data:{service_id:views.tid, uid:bexta.getStorage(USER) && bexta.getStorage(USER).uid || '', firstrow:first, listrow:last,sid:views.sid}});
    mui('.score_star').score({
		eventstar:false, 
		fullStar:"../icon/icon_xingxing@2x.png",
		halfStar:"../icon/icon_bankexin@2x.png",
		voidStar:"../icon/icon_void@2x.png"
	});
	initEvent();
});
function initDom(res){
	var listBox = document.querySelector('.list-item-box'),
		str = '';
	mui.each(res.list, function(){
		str += '<div class="item">';
		//收藏
		if( this.is_collect != 1	) str += '<div class="collect" data-id="'+this.id+'"></div>';
		else str += '<div class="collect active" data-id="'+this.id+'"></div>';
		
		str += '<img src="../icon/mask-big.jpg" data-load="'+this.img+'" class="link" _id="detail" _href="detail.html" _extras="pid='+this.id+'" />';
		str += '<div class="item-name mui-clearfix" >' +
				'<div class="name">'+this.name+'</div>';
		
		//价钱
		if( this.price != '0.00' ){
			str += '<div class="mui-pull-right">¥ '+this.price+'</div>';
		}else{
			str += '<div class="mui-pull-right">询价</div>';
		}
		
		str += '<div class="score mui-clearfix" >' +
				'<div class="score_star mui-pull-left" data-cover="'+this.grade+'"></div>' +
				'<div class="mui-pull-left score_comment">'+this.count_discuss+'条评论</div>' +
				'</div></div></div>';
	});
	listBox.innerHTML = str;
	bexta.imageLoad('[data-load]');
	mui('.score_star').score({
		eventstar:false, 
		fullStar:"../icon/icon_xingxing@2x.png",
		halfStar:"../icon/icon_bankexin@2x.png",
		voidStar:"../icon/icon_void@2x.png" 
	});
}
function appendDom(res){
	var listBox = document.querySelector('.list-item-box');
	mui.each(res.list, function(){
		var odiv = document.createElement('div');
		odiv.className = 'item';
		var str = '';
		//收藏
		if( this.is_collect	) str += '<div class="collect " data-id="'+this.id+'"></div>';
		else str += '<div class="collect active" data-id="'+this.id+'"></div>';
		
		str += '<img src="'+this.img+'"  class="link" _id="detail" _href="detail.html" _extras="pid='+this.id+'" />';
		str += '<div class="item-name mui-clearfix" >' +
				'<div class="name">'+this.name+'</div>';
		
		//价钱
		if( this.price != '0.00' ){
			str += '<div class="mui-pull-right">¥ '+this.price+'</div>';
		}else{
			str += '<div class="mui-pull-right">询价</div>';
		}
		
		str += '<div class="score mui-clearfix" >' +
				'<div class="score_star mui-pull-left" data-cover="'+this.grade+'"></div>' +
				'<div class="mui-pull-left score_comment">'+this.count_discuss+'条评论</div>' +
				'</div></div>';
		odiv.innerHTML = str;
		listBox.appendChild(odiv);
	});
	mui('.score_star').score({
		eventstar:false, 
		fullStar:"../icon/icon_xingxing@2x.png",
		halfStar:"../icon/icon_bankexin@2x.png",
		voidStar:"../icon/icon_void@2x.png"
	});
	
}

function downfresh(){
	bexta.ajax(api.service_goods, function(res){
    		initDom(res);
    		mui('#refreshContainer').pullRefresh().endPulldownToRefresh()
    }, {data:{service_id:views.tid, uid:bexta.getStorage(USER) && bexta.getStorage(USER).uid || '', firstrow: 0, listrow:first}});
}
function upload(){
	var that = this;
	bexta.ajax(api.service_goods, function(res){
		first += res.list.length;
		if( res.list.length == 0 || res.list.length < last ){  
			 that.endPullupToRefresh(true);
		}
		that.endPullupToRefresh(false); 
		if( res.list.length != 0 ){
			appendDom(res);
		}
    }, {data:{service_id:views.tid, uid:bexta.getStorage(USER) && bexta.getStorage(USER).uid || '', firstrow: first, listrow:last}});
}
	
function initEvent(){
	mui('#refreshContainer').on('tap', '.collect', function(){
		var that = this;
		var user = bexta.isLogin(true);
		if( !user ){
			mui.confirm("您还没有登录,是否登录?", TITLE, CONFIRM, function(item){
				if( item.index == 1 ){
					user = bexta.isLogin();
				}
			});
		}else{
			var gid = this.getAttribute('data-id');
			if( that.classList.contains('active') ){
				bexta.ajax(api.del_collect, function(res,msg){
					mui.toast(msg);
					that.classList.remove('active');
				},{ data:{uid:bexta.getStorage(USER) && bexta.getStorage(USER).uid || '',goods_id:gid} });
			}else{
				bexta.ajax(api.collect, function(res,msg){
					mui.toast(msg);
					if( !res ){
						that.classList.add('active');
					}
				}, {data:{uid:bexta.getStorage(USER) && bexta.getStorage(USER).uid || '', goods_id:gid}});
			}
			
			
		}
		
		

	});
}
	
</script>
</body>
</html>
